<template>
      <div class="login-form">
            <!-- 输入框 -->
            <div class="center-form">
                  <el-form ref="ruleFormRef" :model="form" :rules="rules">
                        <el-form-item prop="email">
                              <el-input placeholder="请输入您的账号" clearable size="large" v-model="form.email"></el-input>
                        </el-form-item>
                        <div>

                              <el-form-item prop="code">

                                    <el-input maxlength="6" placeholder="验证码" clearable size="large" style="width:50%;"
                                          v-model="form.code"></el-input>
                                    <el-button :type="message.type" class="upuserup" style="width: 30%;
                                     float:right;
                                     margin-left:15%   
                                    " @click="SendEmailToForget(ruleFormRef)" :disabled="message.isDisabled">{{
                                          message.tips
                                    }}</el-button>

                              </el-form-item>


                        </div>
                        <el-form-item prop="password">
                              <el-input placeholder="请输入新密码" show-password size="large" v-model="form.password">
                              </el-input>
                        </el-form-item>
                        <el-form-item prop="confirmPassword">
                              <el-input placeholder="确认密码" show-password size="large" v-model="form.confirmPassword">
                              </el-input>
                        </el-form-item>
                        <el-button type="primary" class="upuserup" v-if="message.display"
                              @click="submitForm(ruleFormRef)">
                              确认
                              <el-icon class="el-icon--right" size="large" style="margin-left:14px">
                                    <ArrowRight />
                              </el-icon>
                        </el-button>
                        <!-- 登录界面的跳转 -->
                        <div class="footer">
                              <!-- <router-link to="/login">Login</router-link> -->
                              <router-link to="/login"
                                    style="text-decoration:none; position:absolute;left:10%;margin-top:30%;color:white">
                                    返回</router-link>
                        </div>
                  </el-form>
            </div>
      </div>
</template>


<script setup lang='ts'>
import { postToForget, Forget } from '../../api/common';
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
import router from '../../router';

//实现验证码倒计时的方法
const SendEmailToForget = async (ruleFormRef: FormInstance | undefined) => {

      if (!ruleFormRef) return
      await ruleFormRef.validateField("email", errMsg => {
            if (errMsg) {


                  console.log("发送验证码")
                  const Registerdata = postToForget(form.value)
                  console.log(Registerdata)
                  message.display = true; //起初
                  message.isDisabled = true;
                  message.type = "info";
                  let interval = window.setInterval(function () {
                        message.tips = "" + message.number + "秒后重新发送";
                        --message.number;
                        if (message.number < 0) {
                              message.tips = "重新发送";
                              message.number = 60;
                              message.isDisabled = false;
                              window.clearInterval(interval);
                              message.type = "primary";
                        }
                  }, 1000);

                  console.log('submit!')
            }
            else {
                  console.log('error submit!')
                  return false
            }

      })





}


// const submitForm1 = async (ruleFormRef:FormInstance|undefined) => 
// {
// if(!ruleFormRef) return
// await ruleFormRef.validateField("email",errMsg=>{
//   if(errMsg)
//   {
//       console.log('submit!')
//   }
//   else {
//          console.log('error submit!')
//          return false
//   }

// })

// }

//验证码里的对象属性
const message = reactive({
      tips: '获取验证码',
      number: 60,
      display: false,
      isDisabled: false,
      type: "primary"
})

const buttonSet = reactive({
      length: "86%"
})
//表单里的属性
const form = ref(
      {
            email: '',
            password: '',
            confirmPassword: '',
            code: '',
      }

)


const ruleFormRef = ref<FormInstance>()
//密码格式正则表达式
const regexp = new RegExp(/(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]).{8,30}/)
//第一次输入密码的自定义校验规则
const validatePass = (rule: any, value: any, callback: any) => {

      if (!regexp.test(form.value.password))
            callback(new Error("密码要求大小写字母加数字,长度在8到30位之间"))

      callback()

}
//确认密码的自定义校验规则
const validatePass2 = (rule: any, value: any, callback: any) => {

      //首先在rules里面判断密码框是不是空的，如果是空的就说请输入相同的密码
      //       if (value === '') {
      //     callback(new Error('请输入相同密码!'))
      //   }
      //   else
      if (!regexp.test(form.value.password)) {


            callback(new Error("密码要求大小写字母加数字,长度在8到30位之间"))


      }
      else
            if (value !== form.value.password) {
                  callback(new Error("请输入相同密码!"))
            }
            else {
                  callback()
            }

}

// 定义校验规则 ref里面放着一个对象，一个key值，key值对应的数组
const rules = reactive(
      {
            email: [
                  {

                        //必填项
                        required: true,
                        //提示语
                        message: '请输入你的邮箱',
                        //触发条件的方式
                        trigger: 'blur'
                  },
                  {
                        type: "email",
                        //必填项

                        //提示语
                        message: '邮箱格式不正确',
                        //触发条件的方式
                        trigger: 'blur'
                  }
            ],
            password: [
                  {
                        //必填项
                        required: true,
                        //提示语
                        message: '请输入你的密码',
                        //触发条件的方式
                        trigger: 'blur'
                  },
                  {

                        validator: validatePass,
                        min: 8,
                        max: 30,

                        message: "密码必须包含8-30位以上的大小写及数字",
                        trigger: 'blur'
                  }
            ],
            confirmPassword: [
                  {

                        //必填项
                        required: true,
                        //提示语
                        message: '请输入相同密码',
                        //触发条件的方式
                        trigger: 'blur'
                  },
                  {
                        validator: validatePass2,

                        trigger: 'blur'

                  }
            ],
            code: [
                  {
                        //必填项

                        required: true,
                        //提示语
                        message: '请输入验证码',
                        //触发条件的方式
                        trigger: 'blur',

                  }
            ]
      }
)
// 统一校验
const submitForm = async (formEl: FormInstance | undefined) => {
      if (!formEl) return

      await formEl.validate((valid, fields) => {
            if (valid) {


                  console.log('submit!')
                  const logindata = Forget(form.value)
                  console.log(logindata)
            } else {
                  console.log('error submit!', fields)
            }
      })
}



</script>


<style scoped>
.login-form {
      position: absolute;
      width: 70%;
      height: 69%;
      left: 50%;
      top: 70%;
      /* background: red; */

      transform: translate(-50%, -50%);
}

.center-form {
      width: 90%;
      height: 70%;
      /* // background: black; */
      position: absolute;
      top: 2%;
      left: 0;
      right: 0;
      margin: auto;
}

.footer {
      width: 100%;
      height: 15%;
      /* // background: yellow; */

      position: absolute;
      left: 0;
      /* // top: 0; */
      bottom: 0;
      right: 0;
      margin: auto;
}

.el-input {
      height: 22%;
      width: 86%;
      left: 9%;
      top: 10%;
      display: inline-block;

      text-align: center;
      font-size: 16px;
}

:v-deep .el-input__inner {
      height: 60px;
      background: #43494e;
}

.router-link {
      width: 86%;
      margin-left: 9%;
      height: 58px;
      background: #007eff;
}

:deep(.el-form-item__content) {
      height: 20%;
}

:deep(.el-form-item__error) {
      left: 9%;
}

.el-button {
      width: 86%;
      margin-left: 9%;
      height: 60px;
      margin-top: auto;
}

:deep(.el-input__inner) {
      height: 60px;
      background: #43494e;
      color: black;
      margin-top: 4%;
}
</style>
